<template>
  <div>
    <!-- 修改用户个人信息弹出层 -->
    <el-dialog
      title="修改个人信息"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        status-icon
        :rules="rules"
        :model="modifyForm"
        ref="modifyForm"
        style="color: black"
      >
        <el-form-item label="头像" name="modify" label-width="70px" prop="">
          <img
            style="width: 80px; height: 80px"
            :src="require('/src/assets/img/' + modifyForm.imgPath)"
            alt=""
          />
        </el-form-item>
        <el-form-item
          label="用户名"
          name="modify"
          label-width="70px"
          prop="username"
        >
          <el-input type="text" v-model="modifyForm.username" />
        </el-form-item>

        <el-form-item
          label="密码"
          name="modify"
          label-width="70px"
          prop="password"
        >
          <el-input type="text" v-model="modifyForm.password" />
        </el-form-item>

        <el-form-item
          label="支付密码"
          name="modify"
          label-width="70px"
          prop="password"
        >
          <el-input type="text" v-model="modifyForm.paypwd" />
        </el-form-item>

        <el-form-item label="性别" name="modify" label-width="70px" prop="">
          <el-radio v-model="modifyForm.gender" :label="0">男</el-radio>
          <el-radio v-model="modifyForm.gender" :label="1">女</el-radio>
        </el-form-item>

        <el-form-item
          label="邮箱"
          name="modify"
          label-width="70px"
          prop="email"
        >
          <el-input type="text" v-model="modifyForm.email" />
        </el-form-item>

        <el-form-item
          label="手机号码"
          name="modify"
          label-width="70px"
          prop="phone"
        >
          <el-input type="text" v-model="modifyForm.phone" />
        </el-form-item>

        <el-form-item label="客户类型" name="modify" label-width="70px" prop="">
          <el-radio
            v-model="modifyForm.type"
            :label="1"
            :disabled="modifyForm.type === 0"
            >客户</el-radio
          >
          <el-radio v-model="modifyForm.type" :label="0">商家</el-radio>
        </el-form-item>

        <el-form-item
          label="金额"
          name="modify"
          label-width="70px"
          prop="price"
        >
          <el-input type="text" v-model="modifyForm.money" />
        </el-form-item>

        <el-form-item label="地址" name="modify" label-width="70px" prop="">
          <el-select
            v-model="province"
            placeholder="请选择省份"
            @change="changeProvince"
            style="width: 155px"
          >
            <el-option
              v-for="(item, index) in address1"
              :key="index"
              :label="item.title"
              :value="item.title"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="city"
            placeholder="请选择市"
            @change="changeCity"
            style="width: 155px"
          >
            <el-option
              v-for="(item, index) in address2"
              :key="index"
              :label="item.title"
              :value="item.title"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="county"
            placeholder="请选择县或区"
            style="width: 155px"
          >
            <el-option
              v-for="(item, index) in address3"
              :key="index"
              :label="item.title"
              :value="item.title"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label=""
          name="modify"
          label-width="70px"
          prop="specificArea"
        >
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入具体地址..."
            v-model="modifyForm.specificArea"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="infoCancel">取 消</el-button>
        <el-button type="primary" @click="submitForm('modifyForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { postRequest } from "../../util/request";
// import axios from "axios";
export default {
  name: "ModifyUserInfo",
  data() {
    return {
      dialogVisible: false,
      //修改个人信息表单数据
      modifyForm: {
        imgPath: "headPortrait.jpg",
        username: "",
        password: "",
        paypwd: "",
        gender: 0,
        email: "",
        phone: "",
        address: "",
        specificArea: "",
        type: 1,
        money: "",
        id: "",
      },
      address1: require("../../assets/js/area"),
      province: "",
      address2: "",
      city: "",
      address3: "",
      county: "",
      rowData: {},
      //验证规则匹配
      rules: {
        //用户名
        username: [
          {
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请输入用户名！"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        //验证密码
        password: [
          {
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请输入密码！"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        //验证确认密码
        paypwd: [
          {
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请输入支付密码！"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        //验证注册邮箱
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
        //验证手机号
        phone: [
          {
            validator: (rule, value, callback) => {
              var phoneReg = /^1[3|4|5|7|8][0-9]{9}$/;
              if (phoneReg.test(value)) {
                callback();
              } else {
                callback(new Error("手机格式错误"));
              }
            },
            trigger: "blur",
          },
        ],
        specificArea: [
          {
            validator: (rule, value, callback) => {
              if (value == "") {
                callback(new Error("填好地址啊！！"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        money: [
          {
            validator: (rule, value, callback) => {
              if (value == "") {
                callback(new Error("多少钱还输入呢！"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
    };
  },
  //   props: ["rowData"],
  methods: {
    //提交按钮
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid && this.modifyForm.address.trim() !== "") {
          //发送修改信息请求
          let updateResult = postRequest("admin/updateUser", {
            userInfo: this.modifyForm,
          });
          updateResult.then((response) => {
            if (response.data.isUpdate) {
              this.$message({
                type: "success",
                message: "修改成功!",
                duration: 3000,
              });
              //通知父组件进行重新渲染
              this.$emit("gotoInit", true);
              //关闭弹出框
              setTimeout(() => {
                this.dialogVisible = false;
              }, 500);
            }
          });
        } else {
          console.log("error submit!");
          return false;
        }
      });
    },

    //切换省份
    changeProvince() {
      this.city = "";
      this.county = "";
      this.address2 = this.address1.filter((item) => {
        return this.province === item.title;
      });
      this.address2 = this.address2[0].children;
    },
    //切换市
    changeCity() {
      this.county = "";
      this.address3 = this.address2.filter((item) => {
        return this.city == item.title;
      });
      this.address3 = this.address3[0].children;
    },
    //关闭弹出层
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          this.modifyForm.password = "";
          this.modifyForm.email = "";
          this.modifyForm.phone = "";
          this.modifyForm.address = "";
          this.modifyForm.specificArea = "";
          done();
        })
        .catch(() => {});
    },

    //个人信息取消
    infoCancel() {
      this.dialogVisible = false;
      /* let { password, confirmPassword, email, phone, address, specificArea } =
        this.modifyForm; */
      this.modifyForm.password = "";
      this.modifyForm.email = "";
      this.modifyForm.phone = "";
      this.modifyForm.address = "";
      this.modifyForm.specificArea = "";
    },
  },
  mounted() {
    this.$bus.$on("rowData", (rowData) => {
      console.log(rowData);
      this.modifyForm.id = rowData.id;
      this.rowData = rowData;
      this.modifyForm.username = rowData.username;
      this.modifyForm.password = rowData.password;
      this.modifyForm.imgPath = rowData.imgPath;
      this.modifyForm.gender = rowData.type === "女" ? 1 : 0;
      this.modifyForm.phone = rowData.phone;
      this.modifyForm.type = rowData.type === "商家" ? 0 : 1;
      this.modifyForm.paypwd = rowData.paypwd;
      this.modifyForm.money = rowData.money;
      this.modifyForm.email = rowData.email;

      this.dialogVisible = true;
    });
  },
  updated() {
    //整合地址
    this.modifyForm.address =
      this.county === "" && this.modifyForm.specificArea !== ""
        ? ""
        : this.province +
          "省" +
          this.city +
          "市" +
          this.county +
          this.modifyForm.specificArea;
  },
};
</script>

<style>
</style>